<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06JS函数</title>
</head>
<body>
<button onclick="alert('警告框')">弹出警告框</button>
<button onclick="confirm('您确认要删除吗?')">弹出确认框</button>
<button onclick="prompt('请输入会员卡号:')">弹出提示输入框</button>
<script>
    //1.JS通过function关键字来定义函数
    function f1(){
        console.log("f1函数");
    }
    f1();
    //2.带参数的函数
    function f2(n){//形参
        console.log("f2函数"+n);
    }
    f2('今天中午吃什么?');//实参
    f2(666);
    f2(false);
    //3.形参与实参个数问题
    function f3(x,y){//形参
        console.log(x+y);
    }
    f3(1,2);//3
    f3(1);//1+undefined=NaN 如果实参个数小于形参个数,未被赋值的形参值为undefined
    f3(3,2,1);//3+2=5 如果实参个数大于形参个数,多余的实参会被舍弃掉

    //4. arguments用来保存调用函数时传入的参数,可以看到参数的个数与具体的值
    function f4(){
        console.log(arguments);
    }
    f4(50);//Arguments[50,...]
    f4(50,60);//Arguments(2)[50,60,...]
    f4(50,60,70);//Arguments(3)[50,60,70,...]

    //5.函数的返回值
    function f5(a,b){
        return a+b;
    }
    var res = f5(3,4);
    console.log(res);//将函数return的结果保存在res变量中,再打印出来
    console.log(f5(3,4));//直接打印调用f5函数时return的结果

    //第二种函数声明的方式
    //将函数整体交给一个变量来保存,调用函数时直接使用该变量名调用
    var f6 = function(){
        console.log('f6');
    }
    console.log(f6);//f(){ console.log('f6'); }
    console.log(typeof f6);//function
    f6();//f6

    //第三种函数声明方式 箭头函数
    const f7 = (n)=>{
        console.log('箭头函数'+n);
    }
    f7('你好');


</script>

</body>
</html>